<template>
  <div class="container">
    <div class="tree-box">
      <el-tree :data="treeData" default-expand-all>
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <div class="label">{{ data.label }}</div>
          <div class="tree-opt-btn">
            <i class="el-icon-delete" v-show="node.isLeaf"></i>
          </div>
        </div>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { generateFlatTreeData, groupBy } from "/src/assets/js/data";
export default {
  components: {},
  props: {},
  data() {
    return {
      treeData: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    console.log(generateFlatTreeData());
    let arr = generateFlatTreeData().data;
    console.log(groupBy(arr, "countryCode"));

    this.treeData = this.getTreeData();
  },
  beforeDestroy() {},
  methods: {
    getTreeData() {
      let {
        countries,
        airlines,
        aircraftTypes,
        data: flatTreeData,
      } = generateFlatTreeData(100);
      flatTreeData.forEach((item) => {
        item.countryName = countries.find(
          (o) => o.code == item.countryCode
        ).name;
      });

      let groupByConfig = [
        "countryName",
        "airline",
        "aircraftTypes",
        "aircraftName",
      ];
      let testFun = (tree, arr, i) => {
        let field = groupByConfig[i];
        if (i === groupByConfig.length) {
          tree = arr.map((o) => {
            return { label: o[field] };
          });
        } else {
          let group = groupBy(arr, field);
          for (const key in group) {
            if (Object.prototype.hasOwnProperty.call(group, key)) {
              const element = group[key];
              let obj = {
                label: key,
                children: [],
              };
              testFun(obj.children, element, i + 1);
              tree.push(obj);
            }
          }
        }
      };
      let treeData = [];
      console.log(flatTreeData);
      testFun(treeData, flatTreeData, 0);
      return treeData;
    },
  },
};
</script>

<style lang="less" scoped>
// 原本scss换成了less
.container {
  width: 100%;
  height: 100%;
  .tree-box {
    height: 100%;
    width: 400px;
    border: 1px solid red;
    padding: 5px;
    /deep/ .el-tree {
      height: 100%;
      overflow-y: auto;
      background-color: transparent;
      color: #efefef;
      .el-tree-node {
        &:focus .el-tree-node__content {
          background-color: transparent;
        }
        // background-color: transparent;
        .el-tree-node__content {
          // background-color: transparent;
          &:hover {
            background-color: rgba(255, 255, 255, 0.3);
          }
          .custom-tree-node {
            display: flex;
            flex: 1;
            .label {
            }
            .tree-opt-btn {
              margin-left: auto;
              .el-icon-delete {
                color: #f56c6c;
              }
            }
          }
        }
      }
    }
  }
}
</style>
